<template>
<div>
  <v-form
      ref="form"
      :lazy-validation="false"
    >
    <v-row>
      <v-col cols="10">
        <v-card flat>
          <v-card-text>
            <v-expansion-panels
              v-model="panel"
              multiple
              tile
            >
              <v-expansion-panel readonly>
                <v-expansion-panel-header hide-actions>
                  <div class="d-flex align-center justify-space-between">
                    <span>安排酒店</span>
                    <div>
                      <SelectHotel @change="handleChange('hotel', $event)"/>
                    </div>
                  </div>
                </v-expansion-panel-header>
                <v-divider />
                <v-card flat>
                  <v-container class="pa-0">
                    <v-form
                      ref="hotelform"
                      :lazy-validation="false"
                    >
                      <el-table
                        :data="hotelData"
                        border>
                        <el-table-column
                          label="状态"
                          align="center"
                          width="80">
                          <template>
                            <v-chip color="warning" small>未预订</v-chip>
                          </template>
                        </el-table-column>
                        <el-table-column
                          label="分摊类型"
                          align="center"
                          width="120">
                          <template slot-scope="{ row }">
                            <average :items="childs" @change="({average, ids}) => {row.is_share = average, row.ids = ids}">
                              <template v-slot="{ toggle }">
                                <span @click="toggle({items: childs, average: row.is_share, selection: row.ids})">{{!row.is_share ? '指定订单' : '均摊'}}</span>
                              </template>
                            </average>
                          </template>
                        </el-table-column>
                        <!-- <el-table-column
                          prop="date"
                          label="结算方式"
                          width="180">
                          <template slot="header">
                            <span class="mr-1">结算方式</span>
                            <small class="red--text">({{$t('other.required')}})</small>
                          </template>
                          <template slot-scope="{ row }">
                            <dict-select type="settlement" outlined hide-details dense :rules="[rules.required]" required></dict-select>
                          </template>
                        </el-table-column> -->
                        <el-table-column
                          prop="date"
                          label="酒店名称"
                          width="200">
                          <template slot="header">
                            <span class="mr-1">酒店名称</span>
                            <small class="red--text">({{$t('other.required')}})</small>
                          </template>
                          <template slot-scope="{ row }">
                            <v-text-field
                              v-model="row.hotel_name"
                              outlined
                              single-line
                              hide-details
                              dense
                              readonly
                              :rules="[rules.required]"
                              required
                            ></v-text-field>
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="date"
                          label="房型"
                          width="140">
                          <template slot="header">
                            <span class="mr-1">房型</span>
                            <small class="red--text">({{$t('other.required')}})</small>
                          </template>
                          <template slot-scope="{ row }">
                            <v-text-field
                              v-model="row.type"
                              outlined
                              single-line
                              hide-details
                              dense
                              :rules="[rules.required]"
                              required
                            ></v-text-field>
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="date"
                          label="入住日期"
                          width="180">
                          <template slot="header">
                            <span class="mr-1">入住日期</span>
                            <small class="red--text">({{$t('other.required')}})</small>
                          </template>
                          <template slot-scope="{ row }">
                            <el-date-picker v-model="row.start_date" :clearable="false" value-format="yyyy-MM-dd" style="width: 100%"
                              :picker-options="{
                                disabledDate: (date) => {
                                  if(row.end_date) {
                                    return dayjs(date).diff(row.end_date) > -86400000
                                  }
                                  return false
                                }
                              }"
                              type="date" @change="inputChangeDate(row)">
                            </el-date-picker>
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="date"
                          label="退房日期"
                          width="180">
                          <template slot="header">
                            <span class="mr-1">退房日期</span>
                            <small class="red--text">({{$t('other.required')}})</small>
                          </template>
                          <template slot-scope="{ row }">
                            <el-date-picker v-model="row.end_date" :clearable="false" value-format="yyyy-MM-dd" style="width: 100%"
                            :picker-options="{
                              disabledDate: (date) => {
                                if(row.start_date) {
                                  return dayjs(date).diff(row.start_date) < 1
                                }
                                return false
                              }
                            }"
                            type="date" @change="inputChangeDate(row)">
                          </el-date-picker>
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="date"
                          label="数量"
                          width="100">
                          <template slot="header">
                            <span class="mr-1">数量</span>
                            <small class="red--text">({{$t('other.required')}})</small>
                          </template>
                          <template slot-scope="{ row }">
                            <v-text-field
                              v-model.number="row.quantity"
                              outlined
                              single-line
                              hide-details
                              dense
                              :rules="[rules.required]"
                              required
                              type="number"
                              @input="inputHotelPriceTotal(row)"
                            ></v-text-field>
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="date"
                          label="晚数"
                          width="140">
                          <template slot="header">
                            <span class="mr-1">晚数</span>
                            <small class="red--text">({{$t('other.required')}})</small>
                          </template>
                          <template slot-scope="{ row }">
                            <v-text-field
                              v-model.number="row.nights"
                              outlined
                              single-line
                              hide-details
                              dense
                              type="number"
                              readonly
                              @input="inputHotelPriceTotal(row)"
                            ></v-text-field>
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="date"
                          label="成本单价"
                          width="140">
                          <template slot-scope="{ row }">
                            <v-text-field
                              v-model.number="row.price"
                              outlined
                              single-line
                              hide-details
                              dense
                              type="number"
                              @input="inputHotelPriceTotal(row)"
                            ></v-text-field>
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="date"
                          label="成本合计"
                          width="140">
                          <template slot-scope="{ row }">
                            <v-text-field
                              v-model="row._amount"
                              outlined
                              single-line
                              hide-details
                              dense
                              readonly
                            ></v-text-field>
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="date"
                          label="额外费用"
                          width="180">
                          <template slot-scope="{ row }">
                            <v-text-field
                              v-model.number="row.other_amount"
                              outlined
                              single-line
                              hide-details
                              dense
                              type="number"
                              @input="inputHotelPriceTotal(row)"
                            ></v-text-field>
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="date"
                          label="额外费用说明"
                          width="180">
                          <template slot-scope="{ row }">
                            <v-text-field
                              v-model="row.other_price_remark"
                              outlined
                              single-line
                              hide-details
                              dense
                            ></v-text-field>
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="date"
                          label="成本总额"
                          width="140">
                          <template slot-scope="{ row }">
                            <v-text-field
                              v-model="row.amount"
                              outlined
                              single-line
                              hide-details
                              dense
                            ></v-text-field>
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="date"
                          label="备注"
                          min-width="140">
                          <template slot-scope="{ row }">
                            <v-text-field
                              v-model="row.remark"
                              outlined
                              single-line
                              hide-details
                              dense
                            ></v-text-field>
                          </template>
                        </el-table-column>
                        <!-- <el-table-column
                          prop="date"
                          label="联系人"
                          width="140">
                          <template slot-scope="{ row }">
                            <v-text-field
                              v-model="row.name"
                              outlined
                              single-line
                              hide-details
                              dense
                            ></v-text-field>
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="date"
                          label="联系电话"
                          width="140">
                          <template slot-scope="{ row }">
                            <v-text-field
                              v-model="row.name"
                              outlined
                              single-line
                              hide-details
                              dense
                            ></v-text-field>
                          </template>
                        </el-table-column> -->
                        <el-table-column
                            fixed="right"
                            :label="$t('other.action')"
                            width="80">
                            <template slot-scope="{ $index, row }">
                              <v-btn small color="warning" outlined @click="handleRmove($index, row, 'hotel')">{{ $t('actions.delete') }}</v-btn>
                            </template>
                          </el-table-column>
                      </el-table>
                    </v-form>
                  </v-container>
                  <v-card-actions>
                    <div class="d-flex justify-space-between flex-grow-1 align-center">
                      <div class="font-weight-bold">合计成本总额：{{hotelTotalPrice}}</div>
                      <div>
                        <!-- <v-btn outlined color="info" class="mx-2">确认预订</v-btn> -->
                        <v-btn color="primary" class="mx-2" :disabled="!hotelData.length" @click="save('hotel')">保存</v-btn>
                      </div>
                    </div>
                  </v-card-actions>
                </v-card>
              </v-expansion-panel>

              <v-expansion-panel readonly>
                <v-expansion-panel-header hide-actions>
                  <div class="d-flex align-center justify-space-between">
                    <span>安排用车</span>
                    <div>
                      <SelectCar  @change="handleChange('car', $event)"/>
                    </div>
                  </div>
                </v-expansion-panel-header>
                <v-divider />
                <v-card flat>
                  <v-container class="pa-0">
                    <v-form
                      ref="carform"
                      :lazy-validation="false"
                    >
                      <el-table
                        :data="carData"
                        border>
                        <el-table-column
                          label="状态"
                          align="center"
                          width="80">
                          <template>
                            <v-chip color="warning" small>未预订</v-chip>
                          </template>
                        </el-table-column>
                        <el-table-column
                          label="分摊类型"
                          align="center"
                          width="120">
                          <template slot-scope="{ row }">
                            <average :items="childs" @change="({average, ids}) => {row.is_share = average, row.ids = ids}">
                              <template v-slot="{ toggle }">
                                <span @click="toggle({items: childs, average: row.is_share, selection: row.ids})">{{!row.is_share ? '指定订单' : '均摊'}}</span>
                              </template>
                            </average>
                          </template>
                        </el-table-column>
                        <!-- <el-table-column
                          prop="date"
                          label="结算方式"
                          width="140">
                          <template slot-scope="{ row }">
                            <v-text-field
                              v-model="row.name"
                              outlined
                              single-line
                              hide-details
                              dense
                            ></v-text-field>
                          </template>
                        </el-table-column> -->
                        <el-table-column
                          prop="date"
                          label="车辆名称"
                          width="200">
                          <template slot="header">
                            <span class="mr-1">车辆名称</span>
                            <small class="red--text">({{$t('other.required')}})</small>
                          </template>
                          <template slot-scope="{ row }">
                            <v-text-field
                              v-model="row.car_name"
                              outlined
                              single-line
                              hide-details
                              dense
                              :rules="[rules.required]"
                              required
                            ></v-text-field>
                          </template>
                        </el-table-column>
                        <!-- <el-table-column
                          prop="date"
                          label="车型"
                          width="140">
                          <template slot="header">
                            <span class="mr-1">车型</span>
                            <small class="red--text">({{$t('other.required')}})</small>
                          </template>
                          <template slot-scope="{ row }">
                            <v-text-field
                              v-model="row.type"
                              outlined
                              single-line
                              hide-details
                              dense
                              :rules="[rules.required]"
                              required
                            ></v-text-field>
                          </template>
                        </el-table-column> -->
                        <el-table-column
                          prop="date"
                          label="用车日期"
                          width="180">
                          <template slot="header">
                            <span class="mr-1">用车日期</span>
                            <small class="red--text">({{$t('other.required')}})</small>
                          </template>
                          <template slot-scope="{ row }">
                            <el-date-picker v-model="row.start_date" :clearable="false" value-format="yyyy-MM-dd" style="width: 100%"
                              :picker-options="{
                                disabledDate: (date) => {
                                  if(row.end_date) {
                                    return dayjs(date).diff(row.end_date) > -86400000
                                  }
                                  return false
                                }
                              }"
                              type="date" @change="inputChangeDate(row)">
                            </el-date-picker>
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="date"
                          label="结束日期"
                          width="180">
                          <template slot="header">
                            <span class="mr-1">结束日期</span>
                            <small class="red--text">({{$t('other.required')}})</small>
                          </template>
                          <template slot-scope="{ row }">
                            <el-date-picker v-model="row.end_date" :clearable="false" value-format="yyyy-MM-dd" style="width: 100%"
                              :picker-options="{
                                disabledDate: (date) => {
                                  if(row.start_date) {
                                    return dayjs(date).diff(row.start_date) < 1
                                  }
                                  return false
                                }
                              }"
                              type="date" @change="inputChangeDate(row)">
                            </el-date-picker>
                          </template>
                        </el-table-column>
                        <!-- <el-table-column
                          prop="date"
                          label="数量"
                          width="100">
                          <template slot="header">
                            <span class="mr-1">数量</span>
                            <small class="red--text">({{$t('other.required')}})</small>
                          </template>
                          <template slot-scope="{ row }">
                            <v-text-field
                              v-model.number="row.quantity"
                              outlined
                              single-line
                              hide-details
                              dense
                              type="number"
                              :rules="[rules.required]"
                              required
                            ></v-text-field>
                          </template>
                        </el-table-column> -->
                        <el-table-column
                          prop="date"
                          label="天数"
                          width="140">
                          <template slot="header">
                            <span class="mr-1">天数</span>
                            <small class="red--text">({{$t('other.required')}})</small>
                          </template>
                          <template slot-scope="{ row }">
                            <v-text-field
                              v-model.number="row.quantity"
                              outlined
                              single-line
                              hide-details
                              type="number"
                              dense
                              :rules="[rules.required]"
                              required
                              @input="inputHotelPriceCar(row)"
                            ></v-text-field>
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="date"
                          label="成本单价"
                          width="140">
                          <template slot-scope="{ row }">
                            <v-text-field
                              v-model.number="row.price"
                              outlined
                              single-line
                              hide-details
                              dense
                              type="number"
                              @input="inputHotelPriceCar(row)"
                            ></v-text-field>
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="date"
                          label="成本合计"
                          width="140">
                          <template slot-scope="{ row }">
                            <v-text-field
                              v-model="row._amount"
                              outlined
                              single-line
                              hide-details
                              dense
                              readonly
                            ></v-text-field>
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="date"
                          label="油费"
                          width="140">
                          <template slot-scope="{ row }">
                            <v-text-field
                              v-model.number="row.oil_amount"
                              outlined
                              single-line
                              hide-details
                              dense
                              type="number"
                               @input="inputHotelPriceCar(row)"
                            ></v-text-field>
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="date"
                          label="司机小费"
                          width="140">
                          <template slot-scope="{ row }">
                            <v-text-field
                              v-model.number="row.driver_amount"
                              outlined
                              single-line
                              hide-details
                              dense
                              type="number"
                               @input="inputHotelPriceCar(row)"
                            ></v-text-field>
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="date"
                          label="额外费用"
                          width="180">
                          <template slot-scope="{ row }">
                            <v-text-field
                              v-model.number="row.other_amount"
                              outlined
                              single-line
                              hide-details
                              dense
                              type="number"
                               @input="inputHotelPriceCar(row)"
                            ></v-text-field>
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="date"
                          label="额外费用说明"
                          width="180">
                          <template slot-scope="{ row }">
                            <v-text-field
                              v-model="row.other_price_remark"
                              outlined
                              single-line
                              hide-details
                              dense
                            ></v-text-field>
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="date"
                          label="成本总额"
                          width="140">
                          <template slot-scope="{ row }">
                            <v-text-field
                              v-model="row.amount"
                              outlined
                              single-line
                              hide-details
                              dense
                              readonly
                            ></v-text-field>
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="date"
                          label="备注"
                          min-width="140">
                          <template slot-scope="{ row }">
                            <v-text-field
                              v-model="row.remark"
                              outlined
                              single-line
                              hide-details
                              dense
                            ></v-text-field>
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="date"
                          label="司机"
                          width="140">
                          <template slot-scope="{ row }">
                            <v-text-field
                              v-model="row.driver"
                              outlined
                              single-line
                              hide-details
                              dense
                            ></v-text-field>
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="date"
                          label="司机电话"
                          width="140">
                          <template slot-scope="{ row }">
                            <v-text-field
                              v-model="row.telphone"
                              outlined
                              single-line
                              hide-details
                              dense
                            ></v-text-field>
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="date"
                          label="车牌号"
                          width="140">
                          <template slot-scope="{ row }">
                            <v-text-field
                              v-model="row.car_no"
                              outlined
                              single-line
                              hide-details
                              dense
                            ></v-text-field>
                          </template>
                        </el-table-column>
                        <el-table-column
                            fixed="right"
                            :label="$t('other.action')"
                            width="80">
                            <template slot-scope="{ $index, row }">
                              <v-btn small color="warning" outlined @click="handleRmove($index, row, 'car')">{{ $t('actions.delete') }}</v-btn>
                            </template>
                          </el-table-column>
                      </el-table>
                    </v-form>
                  </v-container>
                  <v-card-actions>
                    <div class="d-flex justify-space-between flex-grow-1 align-center">
                      <div class="font-weight-bold">合计成本总额：{{carTotalPrice}}</div>
                      <div>
                        <!-- <v-btn outlined color="info" class="mx-2">确认预订</v-btn> -->
                        <v-btn color="primary" class="mx-2" :disabled="!carData.length" @click="save('car')">保存</v-btn>
                      </div>
                    </div>
                  </v-card-actions>
                </v-card>
              </v-expansion-panel>

              <v-expansion-panel readonly>
                <v-expansion-panel-header hide-actions>
                  <div class="d-flex align-center justify-space-between">
                    <span>安排餐厅</span>
                    <div>
                      <v-btn color="info" rounded small>选择餐厅</v-btn>
                      <!-- <v-btn color="primary" rounded small>{{ $t('actions.add') }}</v-btn> -->
                    </div>
                  </div>
                </v-expansion-panel-header>
                <v-divider />
                <v-card flat>
                  <v-container class="pa-0">
                    <el-table
                      :data="tableData"
                      border>
                      <el-table-column
                        prop="date"
                        label="结算方式"
                        width="140">
                        <template slot-scope="{ row }">
                          <v-text-field
                            v-model="row.name"
                            outlined
                            single-line
                            hide-details
                            dense
                          ></v-text-field>
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="date"
                        label="餐厅名称"
                        width="200">
                        <template slot="header">
                          <span class="mr-1">餐厅名称</span>
                          <small class="red--text">({{$t('other.required')}})</small>
                        </template>
                        <template slot-scope="{ row }">
                          <v-text-field
                            v-model="row.name"
                            outlined
                            single-line
                            hide-details
                            dense
                            :rules="[rules.required]"
                            required
                          ></v-text-field>
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="date"
                        label="用餐日期"
                        width="180">
                        <template slot="header">
                          <span class="mr-1">用餐日期</span>
                          <small class="red--text">({{$t('other.required')}})</small>
                        </template>
                        <template slot-scope="{ row }">
                          <date-picker type="date" small></date-picker>
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="date"
                        label="数量"
                        width="100">
                        <template slot="header">
                          <span class="mr-1">数量</span>
                          <small class="red--text">({{$t('other.required')}})</small>
                        </template>
                        <template slot-scope="{ row }">
                          <v-text-field
                            v-model="row.name"
                            outlined
                            single-line
                            hide-details
                            dense
                            :rules="[rules.required]"
                            required
                          ></v-text-field>
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="date"
                        label="成本单价"
                        width="140">
                        <template slot-scope="{ row }">
                          <v-text-field
                            v-model="row.name"
                            outlined
                            single-line
                            hide-details
                            dense
                          ></v-text-field>
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="date"
                        label="成本合计"
                        width="140">
                        <template slot-scope="{ row }">
                          <v-text-field
                            v-model="row.name"
                            outlined
                            single-line
                            hide-details
                            dense
                          ></v-text-field>
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="date"
                        label="额外费用"
                        width="180">
                        <template slot-scope="{ row }">
                          <v-text-field
                            v-model="row.name"
                            outlined
                            single-line
                            hide-details
                            dense
                          ></v-text-field>
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="date"
                        label="额外费用说明"
                        width="180">
                        <template slot-scope="{ row }">
                          <v-text-field
                            v-model="row.name"
                            outlined
                            single-line
                            hide-details
                            dense
                          ></v-text-field>
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="date"
                        label="成本总额"
                        width="140">
                        <template slot-scope="{ row }">
                          <v-text-field
                            v-model="row.name"
                            outlined
                            single-line
                            hide-details
                            dense
                          ></v-text-field>
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="date"
                        label="备注"
                        min-width="140">
                        <template slot-scope="{ row }">
                          <v-text-field
                            v-model="row.name"
                            outlined
                            single-line
                            hide-details
                            dense
                          ></v-text-field>
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="date"
                        label="联系人"
                        width="140">
                        <template slot-scope="{ row }">
                          <v-text-field
                            v-model="row.name"
                            outlined
                            single-line
                            hide-details
                            dense
                          ></v-text-field>
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="date"
                        label="联系电话"
                        width="140">
                        <template slot-scope="{ row }">
                          <v-text-field
                            v-model="row.name"
                            outlined
                            single-line
                            hide-details
                            dense
                          ></v-text-field>
                        </template>
                      </el-table-column>
                      <el-table-column
                          fixed="right"
                          :label="$t('other.action')"
                          width="80">
                          <template slot-scope="{ $index }">
                            <v-btn small color="warning" outlined @click="handleRmoveTourfee($index)">{{ $t('actions.delete') }}</v-btn>
                          </template>
                        </el-table-column>
                    </el-table>
                  </v-container>
                  <v-card-actions>
                    <v-spacer />
                    <v-btn color="primary" class="mx-2">保存</v-btn>
                  </v-card-actions>
                </v-card>
              </v-expansion-panel>

              <v-expansion-panel readonly>
                <v-expansion-panel-header hide-actions>
                  <div class="d-flex align-center justify-space-between">
                    <span>安排景点</span>
                    <div>
                      <v-btn color="info" rounded small>选择景点</v-btn>
                      <!-- <v-btn color="primary" rounded small>{{ $t('actions.add') }}</v-btn> -->
                    </div>
                  </div>
                </v-expansion-panel-header>
                <v-divider />
                <v-card flat>
                  <v-container class="pa-0">
                    <el-table
                      :data="tableData"
                      border>
                      <el-table-column
                        prop="date"
                        label="结算方式"
                        width="140">
                        <template slot-scope="{ row }">
                          <v-text-field
                            v-model="row.name"
                            outlined
                            single-line
                            hide-details
                            dense
                          ></v-text-field>
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="date"
                        label="景点名称"
                        width="200">
                        <template slot="header">
                          <span class="mr-1">景点名称</span>
                          <small class="red--text">({{$t('other.required')}})</small>
                        </template>
                        <template slot-scope="{ row }">
                          <v-text-field
                            v-model="row.name"
                            outlined
                            single-line
                            hide-details
                            dense
                            :rules="[rules.required]"
                            required
                          ></v-text-field>
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="date"
                        label="使用日期"
                        width="180">
                        <template slot="header">
                          <span class="mr-1">使用日期</span>
                          <small class="red--text">({{$t('other.required')}})</small>
                        </template>
                        <template slot-scope="{ row }">
                          <date-picker type="date" small></date-picker>
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="date"
                        label="数量"
                        width="100">
                        <template slot="header">
                          <span class="mr-1">数量</span>
                          <small class="red--text">({{$t('other.required')}})</small>
                        </template>
                        <template slot-scope="{ row }">
                          <v-text-field
                            v-model="row.name"
                            outlined
                            single-line
                            hide-details
                            dense
                            :rules="[rules.required]"
                            required
                          ></v-text-field>
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="date"
                        label="成本单价"
                        width="140">
                        <template slot-scope="{ row }">
                          <v-text-field
                            v-model="row.name"
                            outlined
                            single-line
                            hide-details
                            dense
                          ></v-text-field>
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="date"
                        label="成本合计"
                        width="140">
                        <template slot-scope="{ row }">
                          <v-text-field
                            v-model="row.name"
                            outlined
                            single-line
                            hide-details
                            dense
                          ></v-text-field>
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="date"
                        label="额外费用"
                        width="180">
                        <template slot-scope="{ row }">
                          <v-text-field
                            v-model="row.name"
                            outlined
                            single-line
                            hide-details
                            dense
                          ></v-text-field>
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="date"
                        label="额外费用说明"
                        width="180">
                        <template slot-scope="{ row }">
                          <v-text-field
                            v-model="row.name"
                            outlined
                            single-line
                            hide-details
                            dense
                          ></v-text-field>
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="date"
                        label="成本总额"
                        width="140">
                        <template slot-scope="{ row }">
                          <v-text-field
                            v-model="row.name"
                            outlined
                            single-line
                            hide-details
                            dense
                          ></v-text-field>
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="date"
                        label="备注"
                        min-width="140">
                        <template slot-scope="{ row }">
                          <v-text-field
                            v-model="row.name"
                            outlined
                            single-line
                            hide-details
                            dense
                          ></v-text-field>
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="date"
                        label="联系人"
                        width="140">
                        <template slot-scope="{ row }">
                          <v-text-field
                            v-model="row.name"
                            outlined
                            single-line
                            hide-details
                            dense
                          ></v-text-field>
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="date"
                        label="联系电话"
                        width="140">
                        <template slot-scope="{ row }">
                          <v-text-field
                            v-model="row.name"
                            outlined
                            single-line
                            hide-details
                            dense
                          ></v-text-field>
                        </template>
                      </el-table-column>
                      <el-table-column
                          fixed="right"
                          :label="$t('other.action')"
                          width="80">
                          <template slot-scope="{ $index }">
                            <v-btn small color="warning" outlined @click="handleRmoveTourfee($index)">{{ $t('actions.delete') }}</v-btn>
                          </template>
                        </el-table-column>
                    </el-table>
                  </v-container>
                  <v-card-actions>
                    <v-spacer />
                    <v-btn color="primary" class="mx-2">保存</v-btn>
                  </v-card-actions>
                </v-card>
              </v-expansion-panel>

              <v-expansion-panel readonly>
                <v-expansion-panel-header hide-actions>
                  <div class="d-flex align-center justify-space-between">
                    <span>安排快艇</span>
                    <div>
                      <v-btn color="info" rounded small>选择快艇</v-btn>
                      <!-- <v-btn color="primary" rounded small>{{ $t('actions.add') }}</v-btn> -->
                    </div>
                  </div>
                </v-expansion-panel-header>
                <v-divider />
                <v-card flat>
                  <v-container class="pa-0">
                    <el-table
                      :data="tableData"
                      border>
                      <el-table-column
                        prop="date"
                        label="结算方式"
                        width="140">
                        <template slot-scope="{ row }">
                          <v-text-field
                            v-model="row.name"
                            outlined
                            single-line
                            hide-details
                            dense
                          ></v-text-field>
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="date"
                        label="快艇名称"
                        width="200">
                        <template slot="header">
                          <span class="mr-1">快艇名称</span>
                          <small class="red--text">({{$t('other.required')}})</small>
                        </template>
                        <template slot-scope="{ row }">
                          <v-text-field
                            v-model="row.name"
                            outlined
                            single-line
                            hide-details
                            dense
                            :rules="[rules.required]"
                            required
                          ></v-text-field>
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="date"
                        label="使用日期"
                        width="180">
                        <template slot="header">
                          <span class="mr-1">使用日期</span>
                          <small class="red--text">({{$t('other.required')}})</small>
                        </template>
                        <template slot-scope="{ row }">
                          <date-picker type="date" small></date-picker>
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="date"
                        label="数量"
                        width="100">
                        <template slot="header">
                          <span class="mr-1">数量</span>
                          <small class="red--text">({{$t('other.required')}})</small>
                        </template>
                        <template slot-scope="{ row }">
                          <v-text-field
                            v-model="row.name"
                            outlined
                            single-line
                            hide-details
                            dense
                            :rules="[rules.required]"
                            required
                          ></v-text-field>
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="date"
                        label="成本单价"
                        width="140">
                        <template slot-scope="{ row }">
                          <v-text-field
                            v-model="row.name"
                            outlined
                            single-line
                            hide-details
                            dense
                          ></v-text-field>
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="date"
                        label="成本合计"
                        width="140">
                        <template slot-scope="{ row }">
                          <v-text-field
                            v-model="row.name"
                            outlined
                            single-line
                            hide-details
                            dense
                          ></v-text-field>
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="date"
                        label="额外费用"
                        width="180">
                        <template slot-scope="{ row }">
                          <v-text-field
                            v-model="row.name"
                            outlined
                            single-line
                            hide-details
                            dense
                          ></v-text-field>
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="date"
                        label="额外费用说明"
                        width="180">
                        <template slot-scope="{ row }">
                          <v-text-field
                            v-model="row.name"
                            outlined
                            single-line
                            hide-details
                            dense
                          ></v-text-field>
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="date"
                        label="成本总额"
                        width="140">
                        <template slot-scope="{ row }">
                          <v-text-field
                            v-model="row.name"
                            outlined
                            single-line
                            hide-details
                            dense
                          ></v-text-field>
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="date"
                        label="备注"
                        min-width="140">
                        <template slot-scope="{ row }">
                          <v-text-field
                            v-model="row.name"
                            outlined
                            single-line
                            hide-details
                            dense
                          ></v-text-field>
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="date"
                        label="联系人"
                        width="140">
                        <template slot-scope="{ row }">
                          <v-text-field
                            v-model="row.name"
                            outlined
                            single-line
                            hide-details
                            dense
                          ></v-text-field>
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="date"
                        label="联系电话"
                        width="140">
                        <template slot-scope="{ row }">
                          <v-text-field
                            v-model="row.name"
                            outlined
                            single-line
                            hide-details
                            dense
                          ></v-text-field>
                        </template>
                      </el-table-column>
                      <el-table-column
                          fixed="right"
                          :label="$t('other.action')"
                          width="80">
                          <template slot-scope="{ $index }">
                            <v-btn small color="warning" outlined @click="handleRmoveTourfee($index)">{{ $t('actions.delete') }}</v-btn>
                          </template>
                        </el-table-column>
                    </el-table>
                  </v-container>
                  <v-card-actions>
                    <v-spacer />
                    <v-btn color="primary" class="mx-2">保存</v-btn>
                  </v-card-actions>
                </v-card>
              </v-expansion-panel>

              <v-expansion-panel readonly>
                <v-expansion-panel-header hide-actions>
                  <div class="d-flex align-center justify-space-between">
                    <span>安排其它</span>
                    <div>
                      <v-btn color="info" rounded small>{{ $t('actions.add') }}</v-btn>
                    </div>
                  </div>
                </v-expansion-panel-header>
                <v-divider />
                <v-card flat>
                  <v-container class="pa-0">
                    <el-table
                      :data="tableData"
                      border>
                      <el-table-column
                        prop="date"
                        label="结算方式"
                        width="140">
                        <template slot-scope="{ row }">
                          <v-text-field
                            v-model="row.name"
                            outlined
                            single-line
                            hide-details
                            dense
                          ></v-text-field>
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="date"
                        label="产品名称"
                        width="200">
                        <template slot="header">
                          <span class="mr-1">产品名称</span>
                          <small class="red--text">({{$t('other.required')}})</small>
                        </template>
                        <template slot-scope="{ row }">
                          <v-text-field
                            v-model="row.name"
                            outlined
                            single-line
                            hide-details
                            dense
                            :rules="[rules.required]"
                            required
                          ></v-text-field>
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="date"
                        label="使用日期"
                        width="180">
                        <template slot="header">
                          <span class="mr-1">使用日期</span>
                          <small class="red--text">({{$t('other.required')}})</small>
                        </template>
                        <template slot-scope="{ row }">
                          <date-picker type="date" small></date-picker>
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="date"
                        label="数量"
                        width="100">
                        <template slot="header">
                          <span class="mr-1">数量</span>
                          <small class="red--text">({{$t('other.required')}})</small>
                        </template>
                        <template slot-scope="{ row }">
                          <v-text-field
                            v-model="row.name"
                            outlined
                            single-line
                            hide-details
                            dense
                            :rules="[rules.required]"
                            required
                          ></v-text-field>
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="date"
                        label="成本单价"
                        width="140">
                        <template slot-scope="{ row }">
                          <v-text-field
                            v-model="row.name"
                            outlined
                            single-line
                            hide-details
                            dense
                          ></v-text-field>
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="date"
                        label="成本合计"
                        width="140">
                        <template slot-scope="{ row }">
                          <v-text-field
                            v-model="row.name"
                            outlined
                            single-line
                            hide-details
                            dense
                          ></v-text-field>
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="date"
                        label="额外费用"
                        width="180">
                        <template slot-scope="{ row }">
                          <v-text-field
                            v-model="row.name"
                            outlined
                            single-line
                            hide-details
                            dense
                          ></v-text-field>
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="date"
                        label="额外费用说明"
                        width="180">
                        <template slot-scope="{ row }">
                          <v-text-field
                            v-model="row.name"
                            outlined
                            single-line
                            hide-details
                            dense
                          ></v-text-field>
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="date"
                        label="成本总额"
                        width="140">
                        <template slot-scope="{ row }">
                          <v-text-field
                            v-model="row.name"
                            outlined
                            single-line
                            hide-details
                            dense
                          ></v-text-field>
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="date"
                        label="备注"
                        min-width="140">
                        <template slot-scope="{ row }">
                          <v-text-field
                            v-model="row.name"
                            outlined
                            single-line
                            hide-details
                            dense
                          ></v-text-field>
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="date"
                        label="联系人"
                        width="140">
                        <template slot-scope="{ row }">
                          <v-text-field
                            v-model="row.name"
                            outlined
                            single-line
                            hide-details
                            dense
                          ></v-text-field>
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="date"
                        label="联系电话"
                        width="140">
                        <template slot-scope="{ row }">
                          <v-text-field
                            v-model="row.name"
                            outlined
                            single-line
                            hide-details
                            dense
                          ></v-text-field>
                        </template>
                      </el-table-column>
                      <el-table-column
                          fixed="right"
                          :label="$t('other.action')"
                          width="80">
                          <template slot-scope="{ $index }">
                            <v-btn small color="warning" outlined @click="handleRmoveTourfee($index)">{{ $t('actions.delete') }}</v-btn>
                          </template>
                        </el-table-column>
                    </el-table>
                  </v-container>
                  <v-card-actions>
                    <v-spacer />
                    <v-btn color="primary" class="mx-2">保存</v-btn>
                  </v-card-actions>
                </v-card>
              </v-expansion-panel>

              <v-expansion-panel readonly>
                <v-expansion-panel-header hide-actions>
                  <div class="d-flex align-center justify-space-between">
                    <span>采购预订记录</span>
                  </div>
                </v-expansion-panel-header>
                <v-divider />
                <v-container class="pa-0">
                  <el-table
                    :data="tableData"
                    border>
                    <el-table-column
                      prop="date"
                      label="预订单号"
                      width="180">
                    </el-table-column>
                    <el-table-column
                      prop="date"
                      label="预订项目名称"
                      width="180">
                    </el-table-column>
                    <el-table-column
                      prop="date"
                      label="凭证号"
                      width="140">
                    </el-table-column>
                    <el-table-column
                      prop="date"
                      label="应付总额"
                      width="140">
                    </el-table-column>
                    <el-table-column
                      prop="date"
                      label="结算方式"
                      width="180">
                    </el-table-column>
                    <el-table-column
                      prop="date"
                      label="已付款"
                      width="140">
                    </el-table-column>
                    <el-table-column
                      prop="date"
                      label="付款中"
                      width="140">
                    </el-table-column>
                    <el-table-column
                      prop="date"
                      label="未付款"
                      width="140">
                    </el-table-column>
                    <el-table-column
                      prop="date"
                      label="备注"
                      min-width="140">
                    </el-table-column>
                    <el-table-column
                      fixed="right"
                      prop="date"
                      label="状态"
                      width="140">
                      <template slot-scope="{ row }">
                        <v-switch class="mt-0" dense hide-details :input-value="row.status == 1" :label="row.status == 1 ? '已审核' : '未审核'" @change="setStatus(row)"></v-switch>
                      </template>
                    </el-table-column>
                    <el-table-column
                        fixed="right"
                        :label="$t('other.action')"
                        width="80">
                        <template slot-scope="{ $index }">
                          <v-btn small color="warning" outlined @click="handleRmoveTourfee($index)">{{ $t('actions.delete') }}</v-btn>
                        </template>
                      </el-table-column>
                  </el-table>
                </v-container>
              </v-expansion-panel>

              <v-expansion-panel readonly>
                <v-expansion-panel-header hide-actions>
                  <div class="d-flex align-center justify-space-between">
                    <span>备注信息</span>
                  </div>
                </v-expansion-panel-header>
                <v-divider />
                <v-container class="py-0">
                  <v-row>
                    <v-col cols="12" class="py-0 form-item-border">
                      <v-row align="center" style="height: 100%;">
                        <label class="text-right flex-shrink-0" style="width: 140px;">基本信息：</label>
                        <div class="pr-4 flex-grow-1">
                          订房备注
                        </div>
                      </v-row>
                    </v-col>
                  </v-row>
                  <v-row>
                    <v-col cols="12" class="py-0 form-item-border">
                      <v-row align="center" style="height: 100%;">
                        <label class="text-right flex-shrink-0" style="width: 140px;">用房数量：</label>
                        <div class="pr-4 flex-grow-1">
                          订房备注
                        </div>
                      </v-row>
                    </v-col>
                  </v-row>
                  <v-row>
                    <v-col cols="12" class="py-0 form-item-border">
                      <v-row align="center" style="height: 100%;">
                        <label class="text-right flex-shrink-0" style="width: 140px;">订房备注：</label>
                        <div class="pr-4 flex-grow-1">
                          订房备注
                        </div>
                      </v-row>
                    </v-col>
                  </v-row>
                  <v-row>
                    <v-col cols="12" class="py-0 form-item-border">
                      <v-row align="center" style="height: 100%;">
                        <label class="text-right flex-shrink-0" style="width: 140px;">订车备注：</label>
                        <div class="pr-4 flex-grow-1">
                          订房备注
                        </div>
                      </v-row>
                    </v-col>
                  </v-row>
                  <v-row>
                    <v-col cols="12" class="py-0 form-item-border">
                      <v-row align="center" style="height: 100%;">
                        <label class="text-right flex-shrink-0" style="width: 140px;">订餐备注：</label>
                        <div class="pr-4 flex-grow-1">
                          订房备注
                        </div>
                      </v-row>
                    </v-col>
                  </v-row>
                  <v-row>
                    <v-col cols="12" class="py-0 form-item-border">
                      <v-row align="center" style="height: 100%;">
                        <label class="text-right flex-shrink-0" style="width: 140px;">景点备注：</label>
                        <div class="pr-4 flex-grow-1">
                          订房备注
                        </div>
                      </v-row>
                    </v-col>
                  </v-row>
                  <v-row>
                    <v-col cols="12" class="py-0 form-item-border">
                      <v-row align="center" style="height: 100%;">
                        <label class="text-right flex-shrink-0" style="width: 140px;">其他备注：</label>
                        <div class="pr-4 flex-grow-1">
                          订房备注
                        </div>
                      </v-row>
                    </v-col>
                  </v-row>
                </v-container>
              </v-expansion-panel>
            </v-expansion-panels>
          </v-card-text>
        </v-card>
      </v-col>
      <v-col cols="2">
        <v-banner sticky single-line>
          <!-- <v-row class="py-2">
            <v-col cols="5"><v-btn style="width: 80px;" @click="handleSave" color="primary">保存</v-btn></v-col>
          </v-row> -->
          <v-stepper class="elevation-0" non-linear vertical>
            <v-stepper-step editable step="1">
              安排酒店
            </v-stepper-step>
            <v-stepper-content step="1">
              <v-card color="lighten-1"></v-card>
            </v-stepper-content>
            <v-stepper-step editable step="2">
              安排用车
            </v-stepper-step>
            <v-stepper-content step="2">
              <v-card color="lighten-1"></v-card>
            </v-stepper-content>
            <v-stepper-step editable step="3">
              安排餐厅
            </v-stepper-step>
            <v-stepper-content step="3">
              <v-card color="lighten-1"></v-card>
            </v-stepper-content>
            <v-stepper-step editable step="4">
              安排景点
            </v-stepper-step>
            <v-stepper-content step="4">
              <v-card color="lighten-1"></v-card>
            </v-stepper-content>
            <v-stepper-step editable step="5">
              安排快艇
            </v-stepper-step>
            <v-stepper-content step="5">
              <v-card color="lighten-1"></v-card>
            </v-stepper-content>
            <v-stepper-step editable step="6">
              安排其他
            </v-stepper-step>
            <v-stepper-content step="6">
              <v-card color="lighten-1"></v-card>
            </v-stepper-content>
            <v-stepper-step editable step="7">
              采购预订记录
            </v-stepper-step>
            <v-stepper-content step="7">
              <v-card color="lighten-1"></v-card>
            </v-stepper-content>
            <v-stepper-step editable step="8">
              备注信息
            </v-stepper-step>
          </v-stepper>
        </v-banner>
      </v-col>
    </v-row>
  </v-form>
</div>
</template>

<script>
import average from '../components/average'
import SelectHotel from '@/views/base-info/resource/components/select-hotel'
import SelectCar from '@/views/base-info/resource/components/select-car'
import dayjs from 'dayjs'
import * as factorApi from '@/api/factor'
export default {
  components: {
    average,
    SelectHotel,
    SelectCar
  },
  props: {
    value: [String, Object]
  },
  computed: {
    childs() {
      return this.value.childs || []
    },
    hotelTotalPrice() {
      return this.hotelData.length && this.hotelData.reduce((a, b) => {
        return a +( b.amount * 1 || 0)
      }, 0)
    },
    carTotalPrice() {
      return this.carData.length && this.carData.reduce((a, b) => {
        return a +( b.amount * 1 || 0)
      }, 0)
    }
  },
  activated() {
    if(this.value.id) {
      this.getlList('hotel')
      this.getlList('car')
    }
  },
  watch: {
    value() {
      this.getlList('hotel')
      this.getlList('car')
    }
  },
  data() {
    return {
      panel: [0, 1, 2, 3, 4, 5, 6, 7],
      tableData: [{}],
      hotelData: [
        // {
        //   plan_pid: undefined,
        //   plan_id: undefined,
        //   is_share: 1,
        //   hotel_id: undefined,
        //   hotel_name: '',
        //   start_date: '',
        //   end_date: '',
        //   type: '',
        //   price: '',
        //   quantity: '',
        //   nights: '',
        //   other_amount: '',
        //   other_price_remark: '',
        //   remark: '',
        //   currency: '',
        //   exchange_rate: '',
        //   ids: [14]
        // }
      ],
      carData: [],
      rules: {
        required: value => !!value || 'required',
      },

      types: {
        hotel: {
          form: 'hotelform',
          get: 'getHotelList',
          del: 'deletePlanHotel',
          add: 'addPlanHotels',
          data: 'hotelData'
        },
        car: {
          form: 'carform',
          get: 'getCarList',
          del: 'deletePlanCar',
          add: 'addPlanCars',
          data: 'carData'
        }
      }
    }
  },
  methods: {
    dayjs,
    save(name) {
      let type = this.types[name]
      if(this.$refs[type.form].validate()) {
        factorApi[type.add]({listData: this[type.data]}).then(res => {
          this.$message.success('success')
          this.getlList(name)
        })
      }
    },
    getlList(name) {
      let type = this.types[name]
      factorApi[type.get]({plan_id: this.value.id, page: 1, limit: 1000}).then(res => {
        this[type.data] = res.data.data.map(item => {
          return {
            ...item,
            _amount: (item.price || 0) * (item.quantity || 0) * (name == 'hotel' ? (item.nights || 0) : 1),
          }
        })
      })
    },
    handleRmove(index, row, name) {
      let type = this.types[name]
      if(row.id) {
        this.$confirm(this.$t('tips.delete'), this.$t('other.tip'), {
          center: true,
          type: 'warning'
        }).then(() => {
          factorApi[type.del]({idArr: [row.id]}).then(() => {
            this.$message.success('success')
            this[type.data].splice(index, 1)
          })
        })
      } else {
        this[type.data].splice(index, 1)
      }
    },
    handleChange(name, data) {
      let type = this.types[name]
      this[type.data].unshift(...data.map(item => {
        return {
          ...item,
          plan_pid: undefined,
          plan_id: this.value.id,
          is_share: 1,
          other_amount: undefined,
          other_price_remark: '',
          remark: '',
          currency: '',
          exchange_rate: '',
          _amount: (item.price || 0) * (item.quantity || 0) * (name == 'hotel' ? (item.nights || 0) : 1),
          amount: (item.price || 0) * (item.quantity || 0) * (name == 'hotel' ? (item.nights || 0) : 1) + (item.other_amount * 1 || 0) + (name == 'car' ? (item.oil_amount * 1 || 0 + item.driver_amount * 1 || 0) : 0)
        }
      }))
    },
    // 计算酒店成本合计
    inputHotelPriceTotal(row) {
      row._amount = (row.price || 0) * (row.quantity || 0) * (row.nights || 0)
      row.amount = (row.price || 0) * (row.quantity || 0) * (row.nights || 0) + (row.other_amount * 1 || 0)
    },
    // 计算车辆陈本合计
    inputHotelPriceCar(row) {
      row._amount = (row.price || 0) * (row.quantity || 0)
      row.amount = (row.price || 0) * (row.quantity || 0) + (row.other_amount * 1 || 0) + (row.oil_amount * 1 || 0) + (row.driver_amount * 1 || 0)
    },
    // 计算天数
    inputChangeDate(row) {
      if(row.start_date && row.end_date) {
        row.nights = dayjs(row.end_date).diff(row.start_date) / 86400000
      }
    },
  }
}
</script>

<style>

</style>